<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由-嵌套路由</title>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/vue2-animate.css" type="text/css">

    <script type="text/javascript" src="./lib/vue/vue.js"></script>
    <script type="text/javascript" src="./lib/vue/router/vue-router.js"></script>
    <style>
        p {
            margin-top: 100px;
            font-size: 22px;
        }
        p > a {
            margin-right: 30px;        
        }
    </style>

</head>

<body>
    <div class="container" id="app">
        <p>
            <router-link to="/user/foo">/foo</router-link>
            <router-link to="/user/foo/profile">/foo/Profile</router-link>
            <router-link to="/user/foo/posts">/foo/Posts</router-link>
        </p>
        <router-view></router-view>

    </div>
</body>


<script>
    // 定义组件
    const User = {
        template: `<div>
            <div>
                <h2>User {{$route.params.id}}</h2>
                <router-view></router-view>
            </div>

        </div>`
    }

    const UserHome = {
        template: '<div>User Home</div>'
    }

    const UserProfile = {
        template: '<div>User Profile</div>'
    }

    const UserPosts = {
        template: '<div>User Posts</div>'
    }

    // 定义路由实例
    const router = new VueRouter({
        routes: [
            {
                path: '/user/:id',
                component: User,
                // 嵌套路由
                children: [
                    {
                        path: '',
                        component: UserHome
                    }, {
                        path: 'profile',
                        component: UserProfile
                    }, {
                        path: 'posts',
                        component: UserPosts
                    }
                ]
            }
        ]
    })

    // 创建根实例并挂载路由
    const app = new Vue({
        router
    }).$mount('#app')
</script>

</html>